<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代练通帮助文档查看器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .header .stats {
            font-size: 14px;
            opacity: 0.9;
        }

        .toolbar {
            padding: 20px 30px;
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            align-items: center;
        }

        .search-box {
            flex: 1;
            min-width: 250px;
            position: relative;
        }

        .search-box input {
            width: 100%;
            padding: 12px 40px 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.3s;
        }

        .search-box input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .search-box::after {
            content: '🔍';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .filter-box {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-box select {
            padding: 12px 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .filter-box select:focus {
            outline: none;
            border-color: #667eea;
        }

        .content-area {
            display: flex;
            min-height: 600px;
        }

        .sidebar {
            width: 300px;
            background: #f8f9fa;
            border-right: 1px solid #e9ecef;
            padding: 20px;
            overflow-y: auto;
            max-height: calc(100vh - 200px);
        }

        .sidebar h2 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
        }

        .doc-list {
            list-style: none;
        }

        .doc-item {
            padding: 12px 15px;
            margin-bottom: 8px;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            border: 2px solid transparent;
        }

        .doc-item:hover {
            background: #e7f3ff;
            border-color: #667eea;
            transform: translateX(5px);
        }

        .doc-item.active {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .doc-item .title {
            font-weight: 500;
            font-size: 14px;
            margin-bottom: 5px;
            line-height: 1.4;
        }

        .doc-item .summary {
            font-size: 12px;
            color: #666;
            line-height: 1.4;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .doc-item.active .summary {
            color: rgba(255, 255, 255, 0.9);
        }

        .doc-item .meta {
            font-size: 11px;
            color: #999;
            margin-top: 5px;
        }

        .doc-item.active .meta {
            color: rgba(255, 255, 255, 0.8);
        }

        .main-content {
            flex: 1;
            padding: 30px;
            overflow-y: auto;
            max-height: calc(100vh - 200px);
        }

        .doc-view {
            display: none;
        }

        .doc-view.active {
            display: block;
        }

        .doc-view .title {
            font-size: 28px;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e9ecef;
        }

        .doc-view .meta-info {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            font-size: 13px;
            color: #666;
        }

        .doc-view .meta-info a {
            color: #667eea;
            text-decoration: none;
        }

        .doc-view .meta-info a:hover {
            text-decoration: underline;
        }

        .doc-view .content {
            line-height: 1.8;
            color: #333;
            font-size: 15px;
        }

        .doc-view .content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 15px 0;
        }

        .doc-view .content h1,
        .doc-view .content h2,
        .doc-view .content h3 {
            margin: 20px 0 15px 0;
            color: #333;
        }

        .doc-view .content p {
            margin-bottom: 15px;
        }

        .doc-view .content ul,
        .doc-view .content ol {
            margin: 15px 0 15px 30px;
        }

        .doc-view .content li {
            margin-bottom: 8px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }

        .empty-state .icon {
            font-size: 64px;
            margin-bottom: 20px;
        }

        .empty-state h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #666;
        }

        .loading {
            text-align: center;
            padding: 60px 20px;
            color: #667eea;
        }

        .loading::after {
            content: '...';
            animation: dots 1.5s steps(4, end) infinite;
        }

        @keyframes dots {
            0%, 20% { content: '.'; }
            40% { content: '..'; }
            60%, 100% { content: '...'; }
        }

        .category-badge {
            display: inline-block;
            padding: 4px 8px;
            background: #667eea;
            color: white;
            border-radius: 4px;
            font-size: 11px;
            margin-right: 8px;
        }

        .doc-item.active .category-badge {
            background: rgba(255, 255, 255, 0.3);
        }

        @media (max-width: 768px) {
            .content-area {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                max-height: 300px;
            }

            .toolbar {
                flex-direction: column;
            }

            .search-box {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📚 代练通帮助文档查看器</h1>
            <div class="stats" id="stats">加载中...</div>
        </div>

        <div class="toolbar">
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索文档标题或内容...">
            </div>
            <div class="filter-box">
                <select id="categoryFilter">
                    <option value="">所有分类</option>
                </select>
                <select id="sortFilter">
                    <option value="default">默认排序</option>
                    <option value="title">按标题排序</option>
                    <option value="category">按分类排序</option>
                </select>
            </div>
        </div>

        <div class="content-area">
            <div class="sidebar">
                <h2>文档列表</h2>
                <ul class="doc-list" id="docList">
                    <li class="loading">加载中</li>
                </ul>
            </div>

            <div class="main-content">
                <div id="docViewContainer">
                    <div class="empty-state">
                        <div class="icon">📄</div>
                        <h3>选择一个文档查看</h3>
                        <p>从左侧列表中选择一个文档查看详细内容</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let allDocuments = [];
        let filteredDocuments = [];
        let currentDocIndex = -1;

        // 加载JSON数据
        async function loadData() {
            try {
                // 尝试加载最新的数据文件
                const response = await fetch('./data/help-docs-latest.json');
                if (!response.ok) {
                    throw new Error('无法加载数据文件');
                }
                const data = await response.json();
                allDocuments = data.documents || [];
                filteredDocuments = [...allDocuments];

                // 更新统计信息
                document.getElementById('stats').textContent = 
                    `共 ${data.totalCount} 个文档 | 爬取时间: ${new Date(data.crawlDate).toLocaleString('zh-CN')}`;

                // 初始化分类筛选器
                initCategoryFilter();
                
                // 渲染文档列表
                renderDocList();
            } catch (error) {
                console.error('加载数据失败:', error);
                document.getElementById('stats').textContent = '加载数据失败，请检查数据文件是否存在';
                document.getElementById('docList').innerHTML = 
                    '<li class="empty-state"><div class="icon">❌</div><h3>加载失败</h3><p>无法加载数据文件</p></li>';
            }
        }

        // 初始化分类筛选器
        function initCategoryFilter() {
            const categories = [...new Set(allDocuments.map(doc => doc.category || '未分类'))];
            const categoryFilter = document.getElementById('categoryFilter');
            
            // 定义分类优先级（主要分类排在前面）
            const categoryPriority = {
                '代练通注册': 1,
                '新手学堂': 2,
                '发单接单须知': 3,
                '发单说明': 4,
                '接单说明': 5,
                '王者荣耀': 6,
                '英雄联盟': 7,
                '和平精英': 8,
                '财务': 9,
                '软件使用': 10,
                '客服介入': 11,
                '托管发单': 12,
                '未分类': 999
            };
            
            // 按优先级和名称排序
            categories.sort((a, b) => {
                const priorityA = categoryPriority[a] || 100;
                const priorityB = categoryPriority[b] || 100;
                if (priorityA !== priorityB) {
                    return priorityA - priorityB;
                }
                return a.localeCompare(b, 'zh-CN');
            });
            
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category;
                option.textContent = category;
                categoryFilter.appendChild(option);
            });
        }

        // 渲染文档列表
        function renderDocList() {
            const docList = document.getElementById('docList');
            
            if (filteredDocuments.length === 0) {
                docList.innerHTML = '<li class="empty-state"><div class="icon">🔍</div><h3>没有找到文档</h3><p>请尝试其他搜索关键词</p></li>';
                return;
            }

            docList.innerHTML = filteredDocuments.map((doc, index) => {
                const title = doc.title.replace(/^.*?\|.*?-/g, '').trim() || doc.title;
                const summary = doc.summary || '暂无摘要';
                const category = doc.category || '未分类';
                
                return `
                    <li class="doc-item ${index === currentDocIndex ? 'active' : ''}" 
                        data-index="${index}" 
                        onclick="selectDoc(${index})">
                        <div class="title">
                            <span class="category-badge">${category}</span>
                            ${title}
                        </div>
                        <div class="summary">${summary.substring(0, 100)}${summary.length > 100 ? '...' : ''}</div>
                        <div class="meta">${new URL(doc.url).pathname}</div>
                    </li>
                `;
            }).join('');
        }

        // 选择文档
        function selectDoc(index) {
            currentDocIndex = index;
            const doc = filteredDocuments[index];
            
            if (!doc) return;

            // 更新列表样式
            document.querySelectorAll('.doc-item').forEach((item, i) => {
                item.classList.toggle('active', i === index);
            });

            // 渲染文档内容
            renderDocView(doc);
        }

        // 渲染文档视图
        function renderDocView(doc) {
            const container = document.getElementById('docViewContainer');
            const title = doc.title.replace(/^.*?\|.*?-/g, '').trim() || doc.title;
            
            // 处理内容中的图片URL（相对路径转绝对路径）
            let content = doc.content || '';
            content = content.replace(/src="\//g, `src="https://help.dailiantong.com/`);
            content = content.replace(/src='\//g, `src='https://help.dailiantong.com/`);
            
            // 禁用内容中的所有链接跳转
            content = content.replace(/<a\s+([^>]*\s+)?href=["']([^"']+)["']([^>]*)>/gi, (match, before, href, after) => {
                // 保留链接样式，但移除href或改为javascript:void(0)
                return `<a ${before || ''}href="javascript:void(0)" ${after || ''}onclick="return false;" style="cursor: default; text-decoration: none; color: inherit;">`;
            });

            container.innerHTML = `
                <div class="doc-view active">
                    <div class="title">${title}</div>
                    <div class="meta-info">
                        <span>📁 分类: <strong>${doc.category || '未分类'}</strong></span>
                        <span>📊 相关链接: ${doc.links ? doc.links.length : 0} 个</span>
                    </div>
                    <div class="content">${content}</div>
                </div>
            `;
        }

        // 搜索功能
        function handleSearch() {
            const searchTerm = document.getElementById('searchInput').value.toLowerCase().trim();
            const category = document.getElementById('categoryFilter').value;
            
            filteredDocuments = allDocuments.filter(doc => {
                const matchSearch = !searchTerm || 
                    doc.title.toLowerCase().includes(searchTerm) ||
                    (doc.summary && doc.summary.toLowerCase().includes(searchTerm)) ||
                    (doc.content && doc.content.toLowerCase().includes(searchTerm));
                
                const matchCategory = !category || doc.category === category;
                
                return matchSearch && matchCategory;
            });

            // 应用排序
            applySort();
            
            currentDocIndex = -1;
            renderDocList();
            
            // 清空文档视图
            document.getElementById('docViewContainer').innerHTML = `
                <div class="empty-state">
                    <div class="icon">📄</div>
                    <h3>选择一个文档查看</h3>
                    <p>从左侧列表中选择一个文档查看详细内容</p>
                </div>
            `;
        }

        // 应用排序
        function applySort() {
            const sortType = document.getElementById('sortFilter').value;
            
            switch(sortType) {
                case 'title':
                    filteredDocuments.sort((a, b) => {
                        const titleA = a.title.replace(/^.*?\|.*?-/g, '').trim();
                        const titleB = b.title.replace(/^.*?\|.*?-/g, '').trim();
                        return titleA.localeCompare(titleB, 'zh-CN');
                    });
                    break;
                case 'category':
                    // 定义分类优先级
                    const categoryPriority = {
                        '代练通注册': 1,
                        '新手学堂': 2,
                        '发单接单须知': 3,
                        '发单说明': 4,
                        '接单说明': 5,
                        '王者荣耀': 6,
                        '英雄联盟': 7,
                        '和平精英': 8,
                        '财务': 9,
                        '软件使用': 10,
                        '客服介入': 11,
                        '托管发单': 12,
                        '未分类': 999
                    };
                    
                    filteredDocuments.sort((a, b) => {
                        const catA = a.category || '未分类';
                        const catB = b.category || '未分类';
                        const priorityA = categoryPriority[catA] || 100;
                        const priorityB = categoryPriority[catB] || 100;
                        
                        if (priorityA !== priorityB) {
                            return priorityA - priorityB;
                        }
                        
                        if (catA !== catB) {
                            return catA.localeCompare(catB, 'zh-CN');
                        }
                        return (a.sortOrder || 0) - (b.sortOrder || 0);
                    });
                    break;
                default:
                    filteredDocuments.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
            }
        }

        // 事件监听
        document.getElementById('searchInput').addEventListener('input', handleSearch);
        document.getElementById('categoryFilter').addEventListener('change', handleSearch);
        document.getElementById('sortFilter').addEventListener('change', () => {
            applySort();
            renderDocList();
        });

        // 页面加载时加载数据
        loadData();
    </script>
</body>
</html>
